<template>
	<view class="container">
		<view class="header">确认订单</view>
		<view class="message-list">
			<!-- 顶部服务类型 -->
			<view class="service-types">
				<view class="service-item active">
					<view class="service-icon blue"></view>
					<text>预约服务</text>
				</view>
				<view class="service-item">
					<view class="service-icon green"></view>
					<text>支付订单</text>
				</view>
				<view class="service-item">
					<view class="service-icon orange"></view>
					<text>门店服务</text>
				</view>
			</view>

			<!-- 店铺信息 -->
			<view class="shop-info">
				<image src="/static/whb/商家.png" class="shop-icon"></image>
				<view class="shop-detail">
					<text class="shop-text">伟业汽车美容店（人民路店）</text>
					<text class="shop-text">山阳区人民中路33号</text>
				</view>
			</view>

			<!-- 联系人信息 -->
			<view class="contact-info">
				<view class="contact-item">
					<image src="/static/whb/人员.png" class="item-icon"></image>
					<text>张先生</text>
					<text class="phone">18656894566</text>
				</view>
				<view class="contact-item" @click="openTimePicker">
					<image src="/static/whb/预约.png" class="item-icon"></image>
					<text>立即预约</text>
					<image src="/static/whb/箭头.png" class="arrow-icon"></image>
				</view>
				<view class="contact-item" @click="navigateToCarPage">
					<image src="/static/whb/车辆.png" class="item-icon"></image>
					<text>奔驰FWE4/鲁A56487</text>
					<image src="/static/whb/箭头.png" class="arrow-icon"></image>
				</view>
			</view>

			<!-- 服务产品 -->
			<view class="service-products">
				<view class="section-title">服务产品</view>
				<view class="product-list">
					<view class="product-item">
						<text class="product-name">小保养套餐1(合成机油+机滤)</text>
						<text class="product-price">￥39.9</text>
					</view>
					<view class="product-item">
						<text class="product-name">小保养套餐1(合成机油+机滤)</text>
						<text class="product-price">￥49.9</text>
					</view>
				</view>
				<view class="coupon-item" @click="navigateToCouponPage">
					<view class="coupon-left">
						<image src="/static/whb/优惠券.png" class="coupon-icon"></image>
						<text>代金券/优惠券</text>
					</view>
					<view class="coupon-right">
						<text class="discount">-10元</text>
						<image src="/static/whb/箭头.png" class="arrow-icon"></image>
					</view>
				</view>
			</view>

			<!-- 底部结算栏 -->
			<view class="bottom-bar">
				<view class="service-btn" @click="openServicePopup">
					<image src="/static/whb/客服.png" class="service-icon"></image>
					<text>联系客服</text>
				</view>
				<view class="right-section">
					<view class="total-price">
						<text>合计：</text>
						<text class="price">￥79.8</text>
					</view>
					<button class="submit-btn" @click="openPaymentPopup">提交订单</button>
				</view>
			</view>
		</view>

		<!-- 预约时间弹出框 -->
		<view class="popup-mask" v-if="showTimePicker" @click="closeTimePicker"></view>
		<view class="popup-content" v-if="showTimePicker">
			<view class="popup-header">
				<text class="popup-title">预约时间</text>
				<text class="popup-subtitle">(2023年3月13日 11:52)</text>
			</view>
			<view class="appointment-list">
				<view class="appointment-item" v-for="(item, index) in appointmentTimes" :key="index"
					:class="{ active: selectedDate === item.date }">
					<text>{{item.dateText}}</text>
					<text>{{item.time}}</text>
				</view>
			</view>
			<view class="popup-buttons">
				<button class="cancel-btn" @click="closeTimePicker">取消</button>
				<button class="confirm-btn" @click="confirmAppointment">确定</button>
			</view>
		</view>

		<!-- 客服弹出框 -->
		<view class="popup-mask" v-if="showServicePopup" @click="closeServicePopup"></view>
		<view class="service-popup" v-if="showServicePopup">
			<view class="action-list">
				<view class="action-item phone" @click="copyPhoneNumber">18642589456</view>
				<view class="action-item copy" @click="copyPhoneNumber">复制</view>
				<view class="action-item cancel" @click="closeServicePopup">取消拨号</view>
			</view>
		</view>

		<!-- 支付弹出框 -->
		<view class="popup-mask" v-if="showPaymentPopup" @click="closePaymentPopup"></view>
		<view class="payment-popup" v-if="showPaymentPopup">
			<view class="payment-header">
				<text class="close-icon" @click="closePaymentPopup">×</text>
				<text class="payment-title">请输入支付密码</text>
			</view>
			<view class="shop-name">车辆服务平台</view>
			<view class="payment-amount">¥ {{totalAmount}}</view>
			<view class="payment-method">
				<text class="method-title">支付方式</text>
				<text class="method-more">零钱 ></text>
			</view>
			<view class="password-input">
				<input 
					type="number" 
					v-model="password" 
					maxlength="6" 
					@input="handlePasswordInput" 
					class="hidden-input"
					focus
				/>
				<view class="input-boxes">
					<view class="input-box" v-for="(digit, index) in passwordArray" :key="index">
						<text v-if="digit" class="dot">•</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, watch } from 'vue';

const showTimePicker = ref(false);
const showServicePopup = ref(false);
const showPaymentPopup = ref(false);
const totalAmount = ref('39.90');
const selectedDate = ref('');
const password = ref('');
const correctPassword = '123456';

const appointmentTimes = ref([
	{ date: '3-13', dateText: '3月13日 (今天)', time: '14:00' },
	{ date: '3-14', dateText: '3月14日 (明天)', time: '09:00' },
	{ date: '3-15', dateText: '3月15日 (后天)', time: '09:00' },
	{ date: '3-16', dateText: '3月16日', time: '09:00' }
]);

const passwordArray = computed(() => {
	const arr = new Array(6).fill('');
	const chars = password.value.split('');
	chars.forEach((char, index) => {
		if (index < 6) arr[index] = char;
	});
	return arr;
});

const handlePasswordInput = (e) => {
	password.value = e.detail.value;
};

watch(password, (newValue) => {
	if (newValue === correctPassword) {
		closePaymentPopup();
		uni.navigateTo({
			url: '/pages/whb/04-orderpayment/04-orderpayment'
		});
		// Reset password after successful navigation
		password.value = '';
	}
});

const openTimePicker = () => {
	showTimePicker.value = true;
};

const closeTimePicker = () => {
	showTimePicker.value = false;
};

const confirmAppointment = () => {
	closeTimePicker();
};

const navigateToCarPage = () => {
	uni.navigateTo({
		url: '/pages/whb/04-car/04-car'
	});
};

const navigateToCouponPage = () => {
	uni.navigateTo({
		url: '/pages/whb/04-coupon/04-coupon'
	});
};

const openServicePopup = () => {
	showServicePopup.value = true;
};

const closeServicePopup = () => {
	showServicePopup.value = false;
};

const copyPhoneNumber = () => {
	uni.setClipboardData({
		data: '18642589456',
		success: () => {
			uni.showToast({
				title: '电话号码已复制',
				icon: 'success'
			});
		}
	});
};

const openPaymentPopup = () => {
	showPaymentPopup.value = true;
};

const closePaymentPopup = () => {
	showPaymentPopup.value = false;
};
</script>

<style>
	.container {
		height: 200px;
		background-color: #007AFF;
	}

	.header {
		text-align: center;
		color: white;
		padding-top: 10px;
		font-size: 20px;
	
	}

	.message-list {
		background-color: white;
		margin: 30rpx;
		border-radius: 20rpx;
		padding: 30rpx;
	}

	.service-types {
		display: flex;
		justify-content: space-around;
		margin-bottom: 40rpx;
	}

	.service-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10rpx;
	}

	.service-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.service-icon.blue {
		background-color: #007AFF;
	}

	.service-icon.green {
		background-color: #00C853;
	}

	.service-icon.orange {
		background-color: #FF5722;
	}

	.shop-info {
		display: flex;
		align-items: flex-start;
		padding: 20rpx 0;
	}

	.shop-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
		margin-top: 6rpx;
	}

	.shop-detail {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 10rpx;
	}

	.shop-text {
		font-size: 28rpx;
		color: #333;
		line-height: 1.4;
	}

	.contact-info {
		padding: 20rpx 0;
		border-bottom: 1px solid #EEEEEE;
	}

	.contact-item {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
	}

	.item-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	.phone {
		margin-left: auto;
		color: #666;
	}

	.arrow-icon {
		width: 32rpx;
		height: 32rpx;
		margin-left: auto;
	}

	.service-products {
		padding: 20rpx 0;
	}

	.section-title {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 20rpx;
	}

	.product-list {
		margin-bottom: 20rpx;
	}

	.product-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
	}

	.product-name {
		font-size: 28rpx;
		color: #333;
	}

	.product-price {
		font-size: 28rpx;
		color: #FF5722;
	}

	.coupon-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-top: 1px solid #EEEEEE;
	}

	.coupon-left {
		display: flex;
		align-items: center;
	}

	.coupon-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	.coupon-right {
		display: flex;
		align-items: center;
	}

	.discount {
		color: #FF5722;
		margin-right: 20rpx;
	}

	.bottom-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background: #FFFFFF;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		height: 100rpx;
	}

	.service-btn {
		display: flex;
		align-items: center;
		padding: 0 30rpx;
	}

	.service-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.service-btn text {
		font-size: 26rpx;
		color: #666;
	}

	.right-section {
		display: flex;
		align-items: center;
		height: 100%;
	}

	.total-price {
		font-size: 32rpx;
		margin-right: 30rpx;
		height: 80rpx;
		line-height: 80rpx;
	}

	.price {
		color: #FF5722;
		font-weight: bold;
	}

	.submit-btn {
		background: #007AFF;
		color: #FFFFFF;
		padding: 0 60rpx;
		border-radius: 40rpx;
		border: none;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
	}

	.popup-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 100;
	}

	.popup-content {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding: 30rpx;
		z-index: 101;
	}

	.popup-header {
		text-align: center;
		margin-bottom: 30rpx;
	}

	.popup-title {
		font-size: 32rpx;
		font-weight: bold;
		display: block;
	}

	.popup-subtitle {
		font-size: 24rpx;
		color: #666;
		margin-top: 10rpx;
		display: block;
	}

	.appointment-list {
		margin: 30rpx 0;
	}

	.appointment-item {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 0;
		border-bottom: 1px solid #eee;
		color: #333;
		font-size: 28rpx;
	}

	.appointment-item.active {
		color: #007AFF;
	}

	.popup-buttons {
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
		gap: 20rpx;
	}

	.cancel-btn, .confirm-btn {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 40rpx;
		font-size: 32rpx;
	}

	.cancel-btn {
		background: #f5f5f5;
		color: #333;
	}

	.confirm-btn {
		background: #007AFF;
		color: #fff;
	}

	.service-popup {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #f5f5f5;
		z-index: 101;
		border-radius: 20rpx 20rpx 0 0;
	}

	.action-list {
		padding: 20rpx;
	}

	.action-item {
		background: #fff;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		font-size: 32rpx;
	}

	.action-item:last-child {
		margin-bottom: 0;
	}

	.phone {
		color: #007AFF;
		font-weight: bold;
	}

	.copy {
		color: #007AFF;
	}

	.cancel {
		color: #666;
	}

	.payment-popup {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		background: #fff;
		border-radius: 20rpx;
		width: 600rpx;
		z-index: 101;
	}

	.payment-header {
		position: relative;
		padding: 30rpx;
		text-align: center;
		border-bottom: 1px solid #eee;
	}

	.close-icon {
		position: absolute;
		left: 30rpx;
		font-size: 40rpx;
		color: #999;
		line-height: 1;
	}

	.payment-title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.shop-name {
		text-align: center;
		font-size: 28rpx;
		color: #333;
		padding: 30rpx 0;
	}

	.payment-amount {
		text-align: center;
		font-size: 48rpx;
		font-weight: bold;
		padding: 20rpx 0 40rpx;
	}

	.payment-method {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-top: 1px solid #eee;
	}

	.method-title {
		font-size: 28rpx;
		color: #333;
	}

	.method-more {
		font-size: 28rpx;
		color: #999;
	}

	.password-input {
		padding: 40rpx 30rpx;
		position: relative;
	}

	.hidden-input {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		z-index: 1;
	}

	.input-boxes {
		display: flex;
		justify-content: space-between;
		gap: 20rpx;
	}

	.input-box {
		flex: 1;
		height: 100rpx;
		border: 2rpx solid #ddd;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.dot {
		font-size: 50rpx;
		line-height: 1;
	}
</style>